<template>
	<view class="page">
		<view class="input" v-if="isAnother">
<!-- 			<view class="title">
				<view class="text">—— 根据姓名查询 ——</view>
				<slot name="menu"></slot>
			</view> -->
			<view class="input_detail">
				<view class="close" v-if="nameSearch" @click="clearInput()">
					<view class="iconfont icon-guanbi"></view>
				</view>
				<input type="text" placeholder="请输入姓名" placeholder-class="placeholder_class" @input="searchInput"
					v-model="nameSearch" />
				<view class="iconfont icon-sousuo1" @click="clickSearchInput()"></view>
			</view>
		</view>
		<view class="condition_search" v-if="!isAnother">
<!-- 			<view class="title">
				<view class="text">—— 根据条件查询 ——</view>
				<slot name="menu"></slot>
				
			</view> -->
			<view class="row">
				<view class="item">
					<view class="item_title">学院:</view>
					<view class="content">
						<picker class="itemPicker" @change="collegeChange" :value="collegeIndex" :range="collegeArray"
							range-key="collegeName">
							<view class="uni-input">{{collegeArray[collegeIndex].collegeName}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;">
						</view>
					</view>
				</view>
				<view class="item">
					<view class="item_title">专业:</view>
					<view class="content">
						<picker class="itemPicker" @change="majorChange" :value="majorIndex" :range="majorArray"
							range-key="name">
							<view class="uni-input">{{majorArray[majorIndex].name}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;">
						</view>
					</view>
				</view>
				<view style="display: flex;">
					<view class="item ">
						<view class="item_title">年级:</view>
						<view class="content">
							<picker class="itemPicker" @change="gradeChange" :value="gradeIndex" :range="gradeArray">
								<view class="uni-input">{{gradeArray[gradeIndex]}}</view>
							</picker>
							<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;">
							</view>
						</view>
					</view>
					<view class="item">
						<view class="item_title">班级:</view>
						<view class="content">
							<picker class="itemPicker" @change="classChange" :value="classIndex" :range="classArray"
								range-key="className">
								<view class="uni-input">{{classArray[classIndex].className}}</view>
							</picker>
							<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<!-- 				<button class="cut_search " @click="cut()">
					<text v-if="isName">条件查询</text>
					<text v-else>姓名查询</text>
					<text class="iconfont icon-xuanzeqixiayige_o" style="margin-left: 10rpx;"></text>
				</button> -->
			<button class="cut_search " @click="cut()">
				<text class="iconfont icon-qiehuan" style="margin-left: 10rpx;"></text>
				<text v-if="isAnother">条件查询</text>
				<text v-if="!isAnother">姓名查询</text>
			</button>
			<button class="cut_search search" @click="getSearchResult()" v-if="!isAnother">
				<text>查询</text>

			</button>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.getClassify();
		},
		data() {
			return {
				height: 0,
				isName: true,
				isAnother: true, //用于控制当前显示条件还是姓名，由于存在切换后但是并没有调接口的情况，所以分开
				collegeArray: [{
					collegeName: "未知"
				}],
				collegeIndex: 0,
				majorArray: [{
					name: "未知"
				}],
				majorIndex: 0,
				gradeArray: ["未知", "21", "20", "19", "18"],
				gradeIndex: 0,
				classArray: [{
					className: "未知"
				}],
				classIndex: 0,
				params: {
					grade: "",
					collegeId: "",
					majorId: "",
					classId: "",
				},
				noData: true,
				result: [],
				nameSearch: '', //名字查找的值
				nameParams: {
					content: ''
				},
				time: 0 //输入框输入东西时的时间
			}
		},

		methods: {
			clearInput() {
				// console.log('清空');
				this.nameSearch = '';
				this.result = []
			},
			//思路： 理清楚谁对谁的影响，前一级对后一集的影响
			async getClassify() {
				let header = new Object()
				// console.log('执行，，，，，，')
				header.Authority = uni.getStorageSync("Authority")
				let res = await getApp().UniRequest("/mita/authority/classifyMsg", "Get", "", header);
				// console.log(res)
				if (res.code === 20000) {
					// console.log(res)
					this.collegeArray.push(...res.data.classifyVO.list) //学院数组
					this.collegeIndex = res.data.collegeId; //默认学院显示

					this.majorArray.push(...this.collegeArray[this.collegeIndex].list); //专业数组
					this.majorArray.forEach((item, index) => {
						if (item.majorId === res.data.majorId) {
							this.majorIndex = index //默认专业显示
						}
					});

					this.gradeIndex = this.gradeArray.indexOf(res.data.grade); //默认年级显示

					let num;
					this.majorArray[this.majorIndex].list.forEach((item, index) => { //班级数组
						num = item.className.replace(/[^0-9]/ig, ""); //截取数字
						if (num.slice(0, 2) == res.data.grade) {
							this.classArray.push(item)
						}
					})
					this.classArray.forEach((item, index) => {
						if (item.classId === res.data.classId) {
							this.classIndex = index //默认班级显示
						}
					})
				}
			},
			//学院改变
			collegeChange(e) {
				this.collegeIndex = e.detail.value;

				if (this.collegeIndex != 0) {
					// console.log(this.collegeArray[this.collegeIndex].list)
					this.majorArray = [{
						name: "未知"
					}] //初始化数据
					this.majorArray.push(...this.collegeArray[this.collegeIndex].list);
					this.majorIndex = 1;
					this.classManage()
				} else {
					let temp = this.majorArray[this.majorIndex].majorId; //保留原先的数据
					this.majorArray = [{
						name: "未知"
					}] //初始化数据
					this.collegeArray.forEach((item, index) => {
						if (index != 0) {
							this.majorArray.push(...item.list);
						}
					});
					if (this.majorIndex != 0) { //保留原先的专业数据
						try { //用try catch跳出循环
							this.majorArray.forEach((item, index) => {
								if (index != 0) {
									if (item.majorId === temp) {
										this.majorIndex = index;
										throw new Error("final")
									}
									// console.log(index)
								}
							})
						} catch (e) {
							if (e.message != "final") {
								throw e
							}
						}

					}
				}

			},
			//专业改变
			majorChange(e) {
				let that = this;
				// console.log('zhuanye ', e);
				this.majorIndex = e.detail.value;
				// console.log(this.majorIndex);
				if (this.collegeIndex == 0 && this.majorIndex == 0) {

					let originalClassId = this.classArray[this.classIndex].classId;
					this.put();
				} else if (this.majorIndex != 0) {
					this.classManage();
					// console.log(this.collegeArray[this.collegeIndex])
				} else if (this.collegeIndex != 0 && this.majorIndex == 0) { //有学院但是专业未知
					this.majorForeach()
				}

				// console.log(111, this.majorArray)

			},
			//年级改变
			gradeChange(e) {
				// console.log(e);
				this.gradeIndex = e.detail.value;

				if (this.majorIndex != 0) {
					this.classManage();
				} else {
					this.majorForeach()
				}
			},
			//班级改变
			classChange(e) {
				this.classIndex = e.detail.value;
			},

			//班级数据进行修改
			classManage() {
				this.classArray = [{
					className: "未知"
				}];
				this.classIndex = 0;
				let num;
				let classArrayTemp = [];
				// console.log(this.majorArray[this.majorIndex].list)
				this.majorArray[this.majorIndex].list.forEach((item, index) => {
					num = item.className.replace(/[^0-9]/ig, ""); //截取数字
					if (this.gradeArray[this.gradeIndex] == "未知") {
						classArrayTemp.push(item)
					} else {
						if (num.slice(0, 2) == this.gradeArray[this.gradeIndex]) {
							classArrayTemp.push(item)
						}
					}
				});
				// console.log(1111, classArrayTemp)
				let min = {};
				let index = 0;
				for (let i = 0; i < classArrayTemp.length - 1; i++) {
					for (let j = i; j < classArrayTemp.length; j++) {
						if (i === j) {
							min = classArrayTemp[i];
							index = i;
						} else {
							if (min.className.replace(/[^0-9]/ig, "") > classArrayTemp[j].className.replace(/[^0-9]/ig,
									"")) {
								index = j;
								min = classArrayTemp[j];
							}
						}
					}
					classArrayTemp[index] = classArrayTemp[i]
					classArrayTemp[i] = min;
				}
				this.classArray.push(...classArrayTemp);
				// console.log(2222, this.classArray);
				if (this.classArray.length != 1) {
					this.classIndex = 1;
				} else {
					this.classIndex = 0;
				}


			},

			//遍历专业给班级赋值
			majorForeach() {
				let that = this;
				let classItem;
				this.classArray = [{
					className: "未知"
				}];
				this.majorArray.forEach((item, index) => {
					if (index != 0) {
						classItem = [];
						// console.log(item.list)
						item.list.forEach((item1, index1) => {
							// console.log(item1.className.replace(/[^0-9]/ig,"").slice(0,2))
							if (that.gradeArray[that.gradeIndex] == "未知") {
								classItem.push(item1)
							} else {
								if (item1.className.replace(/[^0-9]/ig, "").slice(0, 2) == that.gradeArray[
										that.gradeIndex]) {
									classItem.push(item1)
								}
							}

						})
						// console.log('classItem')
						let min = {};
						let index = 0;
						for (let i = 0; i < classItem.length - 1; i++) {
							// console.log('11111')
							for (let j = i; j < classItem.length; j++) {
								if (i === j) {
									min = classItem[i];
									index = i;
								} else {
									if (min.className.replace(/[^0-9]/ig, "") > classItem[j].className.replace(
											/[^0-9]/ig, "")) {
										index = j;
										min = classItem[j];
									}
								}
							}
							classItem[index] = classItem[i]
							classItem[i] = min;
						}
						// console.log(classItem);
						that.classArray.push(...classItem)

					}
				})
				// console.log(that.classArray)
			},
			//切换查询
			cut() {
				this.isAnother = !this.isAnother 
				// console.log(this.isName)
				this.$emit('cut',this.isAnother) // 用来控制margin
			},
			getSearchResult() {
				this.isName = false;
				
				this.lineHeight = false
				let header = new Object()
				header.Authority = uni.getStorageSync("Authority")
				if (this.collegeIndex != 0) {
					this.params.collegeId = this.collegeArray[this.collegeIndex].collegeId;
				} else {
					this.params.collegeId = ""
				}
				if (this.majorIndex != 0) {
					this.params.majorId = this.majorArray[this.majorIndex].majorId;
				} else {
					this.params.majorId = ""
				}
				if (this.gradeIndex != 0) {
					this.params.grade = this.gradeArray[this.gradeIndex];
				} else {
					this.params.grade = ""
				}
				if (this.classIndex != 0) {
					this.params.classId = this.classArray[this.classIndex].classId;
				} else {
					this.params.classId = ""
				}
				this.$emit('getSearchResult',this.isName,this.params);
				// this.searchResult()
			},
			//查询
			async searchResult() {
				

				this.$emit('searchResult', this.params)

			},
			clickSearchInput() {
				if (!this.nameSearch) {
					uni.showToast({
						title: '请输入对方姓名',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				this.isName = true;
				this.nameParams.content = this.nameSearch;
				this.$emit('searchInput', this.nameParams,this.isName,true);
			},

			//键盘输入事件
			async searchInput(event) {
				this.isName = true;
				// let time = new Date().getTime();
				this.nameParams.content = this.nameSearch;
				// console.log('键盘')
				this.$emit('searchInput', this.nameParams,this.isName);
			},

			//菜单
			toShowShadow() {
				this.showShadow = true
			},

			close() {
				this.showShadow = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		padding-top: 30rpx;
		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}

		// position: fixed;
		// top: 0rpx;
		width: 100%;
		border-bottom: 8rpx solid #D9D9D9;
		padding-top: 40rpx;
		padding-bottom: 5rpx;
		background-color: #fff;

		.title {
			margin-top: 10rpx;
			margin-left: 20rpx;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: #5E5E5E;
			text-align: center;
			position: relative;
		}

		.input {
			box-sizing: border-box;
			height: 210rpx;

			// background-color: pink;
			.input_detail {
				position: relative;
				width: 85%;
				margin: 0 auto;
				margin-top: 30rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				border: 3rpx solid #23b8ff;
				.close {
					z-index: 100;
					position: absolute;
					right: 18%;
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					background-color: pink;
					position: absolute;
					background: rgba(0, 0, 0, 0.3);
					line-height: 35rpx;
					text-align: center;
				
					.iconfont {
						font-size: 24rpx;
						font-weight: 700;
						color: #E5E5E5;
					}
				}
				.icon-sousuo1 {
					width: 20%;
					height: 100%;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					font-size: 36rpx;
					font-weight: 700;
					color: #5E5E5E;
					text-align: center;
					line-height: 80rpx;
					background-color: #F8F8FF;
				}

				input {
					width: 100%;
					padding: 0rpx 20rpx 0rpx 20rpx;
				}
			}
		}

		.condition_search {
			height: 300rpx;

			.row {
				height: 80rpx;
				line-height: 60rpx;

				.item {
					display: flex;
					margin-left: 25rpx;
					letter-spacing: 2rpx;
					margin-bottom: 16rpx;
					font-size: 32rpx;

					.item_title {
						margin-right: 20rpx;

						font-weight: 700;
					}

					.content {
						display: flex;

						// border-bottom: 2rpx solid  #D9D9D9;
						.itemPicker {}

						.iconfont {
							font-size: 38rpx;
						}
					}
				}

				&>.item:nth-child(1),
				&>.item:nth-child(2) {
					// border-bottom: 2rpx solid  #D9D9D9;
				}

				.search {
					width: 130rpx;
					height: 60rpx;
					margin: 1rpx;
					// margin-top: 10rpx;
					position: absolute;
					top: 86rpx;
					right: 26rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					background-color: #23b8ff;
					color: #FFFFFF;

				}
			}
		}

		.foot {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			display: flex;

			.cut_search {
				// width: 200rpx;
				height: 60rpx;

				margin: 1rpx;
				// margin-top: 10rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				background-color: #23b8ff;
				color: #FFFFFF;

				.icon-qiehuan {
					margin-right: 6rpx;
				}

			}

			.search {
				margin-left: 10rpx;
				width: 150rpx;
				background-color: #66CDAA;
			}
		}
	}
</style>
